<script setup lang="ts">
import { getBannersImgUrl } from '@/service/JuejinBodyRightService'
import { getAssetsFile } from '@/utils/getAssetsFile'
import { onMounted, ref } from 'vue'
import SvgIcon from './SvgIcon.vue'

export interface IBannersUrl {
  imgUrl: string
  aUrl: string
  imgShow: boolean
}
const BannersImgUrl = ref<IBannersUrl[]>([])

onMounted(async () => {
  // dataActList.value = []
  BannersImgUrl.value = await getBannersImgUrl()
})
</script>
<template>
  <template v-for="item in BannersImgUrl" :key="item.imgUrl">
    <div class="sidebar-block banner-block" v-if="item.imgShow">
      <div class="banner">
        <a :href="item.aUrl" rel="nofollow noopener noreferrer" target="_blank">
          <img
            :src="getAssetsFile(item.imgUrl)"
            width="240"
            height="200"
            class="banner-image"
          />
        </a>
        <div class="ctrl-box">
          <i
            class="close-btn byte-icon byte-icon--close-circle"
            title="关闭"
            @click="item.imgShow = !item.imgShow"
          >
            <SvgIcon name="ColseSvg" size="12px" />
          </i>
        </div>
      </div>
    </div>
  </template>
</template>
<style scoped lang="scss">
.sidebar-block {
  box-shadow: none;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  margin-bottom: 1.66rem;
  font-size: 1.16rem;
  line-height: 1.29;
  border-radius: 4px;
  color: #252933;
}
.banner-block {
  overflow: hidden;
}
.banner {
  height: 120px;
  position: relative;
  font-size: 0;
  cursor: pointer;
  .banner-image {
    width: 100%;
    height: 100%;
  }
  .ctrl-box {
    .close-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 1rem;
      color: #909090;
      opacity: 0.5;
      display: none;
    }
  }
  &:hover .ctrl-box {
    .close-btn {
      display: block;
    }
  }
}
</style>
